Skip to main content

谈谈 Render Props

具有 render prop 的组件接受一个返回 React 元素的函数，并在组件内部通过调用此函数来实现自己的渲染逻辑。

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

示例 1​

import React from "react";
import "./styles.css";

// 默认
// const Test = (props) => props.children("hello world");
// const App = () => <Test>{(text) => <div>{text}</div>}</Test>;

// render props
const Test = (props) => props.render("hello world");
const App = () => <Test render={(text) => <div>{text}</div>} />;

export default App;

示例 2​

预览地址

当你写项目时碰到需要重用的是功能不是 UI 时，试着用 render props 封装一个组件吧。当然 HOC 也是解决方法，

作用​

  1. 为了重用性。React 的组件化就是为了方便重用。
  2. 大多数场景我们需要重用的是 UI（例如文章列表，侧栏），但也有少数情况需要重用的是功能和状态（例如 context）。
  3. 如果说 React 的核心是 State => UI, 普通的组件是 UI 重用，那么 render props 就是为了 State 重用而应运而生的。

优缺点​

优点：数据共享、代码复用，将组件内的 state 作为 props 传递给调用者，将渲染逻辑交给调用者。 缺点：无法在 return 语句外访问数据、嵌套写法不够优雅

参考文章​